<template>
  <div>
    <section class="ProductItems">
      <div
        class="product-items"
        v-for="(items,index) in ProductItems"
        :key="index"
        @click="goUrl('productDetail',{productId:items.id})"
      >
        <img
          v-lazy="{src: items.productImgUrl, error: defaultImg(1), loading: defaultImg(1)}"
          alt
        />
        <span class="pi-spanOne">{{items.productName}}</span>
        <span class="pi-spanTwo">{{items.productBriefIntro}}</span>
      </div>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import {Lazyload } from 'vant'
Vue.use(Lazyload);
import mixin from "@/utils/mixin";
export default {
  name: "ProductItems",
  mixins: [mixin],
  props: ["ProductItems"],
  components: {},
  data() {
    return {
      show: {}
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>
<style lang="scss" scoped>
.ProductItems {
  .product-items {
    width: 100%;
    height: 200px;
    position: relative;
    .pi-spanOne {
      font-size: 34px;
      font-family: PingFangSC-Medium;
      font-weight: bold;
      color: rgba(48, 49, 51, 1);
      position: absolute;
      left: 244px;
      right: 86px;
      top: 5px;
      height: 48px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    .pi-spanTwo {
      font-size: 28px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(129, 129, 129, 1);
      position: absolute;
      right: 68px;
      left: 244px;
      top: 72px;
      // height: 72px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    img {
      width: 180px;
      height: 180px;
      position: absolute;
      left: 32px;
      top: 0px;
      border-radius: 10px;
    }
  }
}
</style>
